<template>
  <div class="wid">
      <div class="tables" v-show="$route.path == '/personnelManagement/evection'">
          <div class="categoryWrap">
            <div class="serchLeft">
                <div>
                    <span>姓名 : </span>
                    <el-input
                        clearable
                        placeholder="请输入姓名"
                        prefix-icon="el-icon-search"
                        v-model="serchTxt">
                    </el-input>
                </div>
                <div>
                    <span>部门 : </span>
                      <el-select v-model="branch" multiple placeholder="请选择">
                        <el-option
                        v-for="item in branchList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <span>项目合同编号 : </span>
                    <el-input
                        clearable
                        placeholder="请输入项目合同编号"
                        prefix-icon="el-icon-search"
                        v-model="serchTxt">
                    </el-input>
                </div>
                 <div>
                    <span>日期 : </span>
                    <el-date-picker 
                    v-model="headTiem"
                    type="daterange"
                    :clearable="false"
                    @change="changeHeadTiem()"
                    range-separator="-"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                </div>
            </div>
            <div class="operatingBtn">
                <el-button type="primary" @click="utils.goUrl('/personnelManagement/evection/travelApply')">新建</el-button>
                <el-button type="danger" @click="dialogFormVisible = true">导出</el-button>
            </div>
          </div>
          <el-table :header-cell-style="{background:'#f5f6f8'}"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
           >
            </el-table-column>
            <el-table-column
               label="序号"
               width="100px"
            >
            <template slot-scope="scope">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column
               label="姓名"
            >
            <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column
            prop="numberCode"
            label="员工编号"
            >
            </el-table-column>
            <el-table-column
            prop="branch"
            label="部门"
            
            >
            </el-table-column>
            <el-table-column
            prop="reason"
            label="出差事由"
            >
            </el-table-column>
             <el-table-column
            prop="manHour"
            label="出差天数"
           
            >
            </el-table-column>
            <el-table-column
            prop="time"
            label="出差日期"
           
            >
            </el-table-column><el-table-column
            prop="time"
            label="出差地点"
           
            >
            </el-table-column>
            <el-table-column
            prop="time"
            label="项目合同编号"
           
            >
            </el-table-column>
            <el-table-column
            prop="operation"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="primary"
                    size="mini ">
                    详情
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="sizes, prev, pager, next"
            :total="1000">
            </el-pagination>
        </div>
      </div>
      <router-view></router-view>
      <el-dialog title="导出格式" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="导出格式">
                <el-select v-model="form.category" placeholder="">
                    <el-option label="XLSX工作表" value="XLSX工作表"></el-option>
                    <el-option label="XLS工作表" value="XLS工作表"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
     </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          editPassWord:false,
          dialogFormVisible:false,
          serchTxt:'',
          headTiem:'',
          multipleSelection:[],
          branch:"",
          branchList:[
              {
                value: '技术部',
                label: '技术部'
              },
              {
                value: '设计部',
                label: '设计部'
              },
              {
                value: '销售部',
                label: '销售部'
              },
          ],
          WorkingState:"",
          WorkingStateList:[
              {
                value: '离职',
                label: '离职'
              },
              {
                value: '在职',
                label: '在职'
              },
          ],
          form:{
              category:'',
              categoryNumber:'',
              creator:'',
              time:''
          },
           time:'',
          tableData: [
            {
                number:1,
                name:'张三',
                numberCode:'0100000',
                branch: '技术部',
                kind: '内勤',
                time:'2021-06-30',
                am:'待定',
                pm:'17630568059',
                manHour: '8',
                customerID:'xxxxxxxx',
                contractNO:'xxxxxxxxxxxxxxxxx',
                reason:"有事有事有事。。。。",
            },
            {
                number:2,
                 name:'张三',
                numberCode:'0100000',
                branch: '技术部',
                kind: '内勤',
                time:'2021-06-30',
                am:'待定',
                pm:'17630568059',
                manHour: '8',
                customerID:'xxxxxxxx',
                contractNO:'xxxxxxxxxxxxxxxxx',
                reason:"有事有事有事。。。。",
            },
            {
                number:3,
                  name:'张三',
                numberCode:'0100000',
                branch: '技术部',
                kind: '内勤',
                time:'2021-06-30',
                am:'待定',
                pm:'17630568059',
                manHour: '8',
                customerID:'xxxxxxxx',
                contractNO:'xxxxxxxxxxxxxxxxx',
                reason:"有事有事有事。。。。",
            },
            {
                number:4,
                  name:'张三',
                numberCode:'0100000',
                branch: '技术部',
                kind: '内勤',
                time:'2021-06-30',
                am:'待定',
                pm:'17630568059',
                manHour: '8',
                customerID:'xxxxxxxx',
                contractNO:'xxxxxxxxxxxxxxxxx',
                reason:"有事有事有事。。。。",
            },
            {
                number:5,
                 name:'张三',
                numberCode:'0100000',
                branch: '技术部',
                kind: '内勤',
                time:'2021-06-30',
                am:'待定',
                pm:'17630568059',
                manHour: '8',
                customerID:'xxxxxxxx',
                contractNO:'xxxxxxxxxxxxxxxxx',
                reason:"有事有事有事。。。。",
            },
            {
                number:6,
                  name:'张三',
                numberCode:'0100000',
                branch: '技术部',
                kind: '内勤',
                time:'2021-06-30',
                am:'待定',
                pm:'17630568059',
                manHour: '8',
                customerID:'xxxxxxxx',
                contractNO:'xxxxxxxxxxxxxxxxx',
                reason:"有事有事有事。。。。",
            },
        ],
            currentPage2: 5,
      };
    },

    components: {},

    mounted() {},

    methods: {
        // 侧边栏选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val,"valvalval")
        },
        //分页事件   
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },

  }

</script>
<style lang='scss' scoped>
.wid{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #F5F5F5;
    .topButton{
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .categoryWrap{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        box-sizing: border-box;
        padding-bottom: 0;
        .serchLeft{
            width: 80%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            >div{
                margin-right: 30px;
                margin-bottom: 20px;
            }
            span{
                width: 110px;
                color: #333;
                font-size: 16px;
                margin-right: 20px;
                display: inline-block;
            }
            .el-input,.el-select{
                width: 250px;
            }
            .el-input__inner{
                width: 250px;
            }
        }
        .operatingBtn{
            display: flex;
            margin: 0 5px;
            align-items: center;
        }
    
    }
    .placeholder{
        width: 100%;
        height: 10px;
        background: #fff;
    }
    .crumbs{
        padding: 10px 5px;
        color: #666;
        font-size: 16px;
        background: #fff;
        margin-bottom: 20px;
    }
    .tables{
        background: #fff;
        min-height: calc(100vh - 130px);
        border-radius: 12px;
    }
    .page{
        width: 510px;
        margin: 20px auto 0;
    }
}
    ::v-deep.el-form-item{
        display: flex;
    }

    ::v-deep.el-input{
        width: 200px;
    }
    ::v-deep.el-form-item__content{
        margin-left: 0 !important;
    }
    ::v-deep.el-form-item{
        .el-form-item__label{
            width: 90px ;
        }
    }
    .el-image__preview{
        width: 50px;
    }
</style>